<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机号码查询</title>

    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>

</head>
<body>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                   class="layui-input">
        </div>
        <button class="layui-btn" data-type="reload" onclick="sub()">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>



<div>
    <table class="layui-table" id="test">
        <tr>
            <td width="120">手机号码段</td>
            <td><span id="resPhoneNo"></span></td>
        </tr>
        <tr>
            <td>卡号归属地</td>
            <td><span id="resLoc"></span></td>
        </tr>
        <tr>
            <td>运营商</td>
            <td><span id="resSp"></span></td>
        </tr>
        <tr>
            <td>区号</td>
            <td><span id="resAreaCode"></span></td>
        </tr>
        <tr>
            <td>邮编</td>
            <td><span id="resZip"></span></td>
        </tr>
    </table>
</div>


<script>
    //Demo
        function sub() {
            $.ajax({
                dataType: 'json',
                url: '/studentLayer/Phone/ajaxPhone',
                type: 'GET',
                data: {phone: $("#phone").val()},
                //这里的date是为了不与上面的data搞混
                success: function (date) {
                    console.log(date);
                    if(date.resultcode == 200){

                        console.log(date.result.province);
                        $("#resPhoneNo").html($("#phone").val());
                        $("#resLoc").html(date.result.province).append(date.result.city);
                        $("#resSp").html(date.result.company);
                        $("#resAreaCode").html(date.result.areacode);
                        $("#resZip").html(date.result.zip);
                    }else{
                     alert("查无此号");
                    }
                }
            })
        }
</script>


</body>
</html>